<template>
  <div>
    <el-row>
      <el-col :span=span5>
        <div class="filter" v-show="collapse">
          <SidebarSur v-show="isShow"></SidebarSur>
        </div>
      </el-col>

      <el-col :span=span19>
        <router-view/>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import bus from '../../bus';
  import SidebarSur from './slideBar'

  export default {
    components: {
      SidebarSur
    },
    data() {
      return {
        collapse: true,
        isShow: true,
        span5:4,
        span19:20
      }
    },
    created() {
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        if (msg == true) {
          this.collapse = false;
          this.isShow = false;
          this.span5 = 0;
          this.span19 = 24
        } else {
          this.collapse = true;
          this.isShow = true;
          this.span5 = 4;
          this.span19 = 20
        }
      })
    }
  }
</script>

<style scoped>
  .filter {
    background-color: rgba(0, 0, 0, .48);
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 55px 0 100px 30px;
    margin-top: -75px;
  }

  .el-menu {
    background-color: rgba(0, 0, 0, .0);
  }
</style>







